<!DOCTYPE html>
<html>
<head>
<title>内容分发器</title>
<meta charset="UTF-8" />
<script src="js/vue.js"></script>
</head>
<body>

<div id='ppa'>
  <test-component>
    <!-- 以下内容为组件的分发内容    -->
       <p>hello Word！</p>      <!-- 删掉试试看没有分发内容时的样子 -->
       <!-- end -->
</test-component>
</div>


<h3 style='color:red; border-top:2px dashed red; padding-top:10px;'>以下为组件分化内容核心 命名式分发内容 不同的组件呈现多态化的表现形式</h3>

<div id="app">
<my-component v-bind:props="message">
 <!-- 以下内容为组件的命名的分发内容    -->
   <div  slot='one'>
   <p>123123123</p>
   </div>
   <!-- end -->
</my-component>


<my-component v-bind:props="message2">
 <!-- 以下内容为组件的命名的分发内容    -->
   <div  slot='two'>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
   </div>
    <!-- end -->
</my-component>

<div style="border: 1px solid red; padding:5px; ">
<p>solt内容分发，类似面向对象中的多态。一个实例下组件 在不同的的地方渲染 呈现在出两种不同的样子</p>
<p>solt用于渲染多态的标签(如 &lt;p&gt; &lt;li&gt;)和标签内文本。并且在组件中solt渲染的数据不能加以处理利用（这点请与props区别）</p>
</div>
</div>
<script>
 new Vue({
	el : "#app", 
	data : {
		message: '我是my-component组件渲染的第一个例子 内容是一个<p>标签' ,
		message2: '我是my-component组件渲染的第二个例子 内容是一个<ul>列表'  
	},
	components: {
		"my-component" :{ 
			template : "<div>\
			                    <h1>{{ props }}</h1>\
			                    <slot name='one'></slot>\
			                    <!-- 上面当父组件的标签里有slot='one' 才会渲染 否则不渲染-->\
			                    <slot name='two'></slot>\
			                    <!-- 上面当父组件的标签里有slot='two' 才会渲染 否则不渲染 -->\
			                    </div>",
			props:['props']
		}
	} 
 });
 
 new Vue({
		el : "#ppa", 
		components: {
			"test-component" :{ 
				template : "<div>\
				                   <h1>分发内容基础</h1>\
				                   <slot>我只有在父组件没有分发内容时才会显示</slot>\
				                    </div>"
			}
		} 
	 });
</script>
</body>
</html>